<template>
  <n-el tag="div" class="div-one">
    <n-el tag="div" class="main-box" v-for="item in data_list" :key="item" @click="toForecast(item)"> 
      <span>
        {{item}}
      </span>
    </n-el>
  </n-el>
</template>


<script setup lang="ts" name="HZForecast08">
import { onMounted } from "vue";
import { ref } from "vue";
import * as bigApi from "/@api/hz-bigscreen-api";

const sendMessage = inject("sendMessage") as (msg: Map<string, any>) => void;
// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: "pie-simple",
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
  showLegend: {
    type: Boolean,
    default: true,
  },
  showTooltip: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "信息卡片",
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  apiPath: {
    // api路径
    type: String,
    default: "",
  },
  chartsType: {
    // 图表类型
    type: String,
    default: "HZForecast08",
  },
  methodType: {
    type: String, // 请求方式
    default: "get",
  },
});

const data_list = ref([]);
onMounted(() => {
  loadDataList();
});

function loadDataList() {
  getCom().then((res: any) => {
    res.data.unshift("全部");
    data_list.value = res.data;
  });
  toForecast('')
}

const getCom = async () => {
  return await bigApi.loadEchartsData(
    "/api/jd/big_screen/category/",
    "get",
    {}
  );
};

const refreshCharts = (data: any) => {
  loadDataList();
};

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
});


function toForecast(category: any) {
  if (sendMessage) {
    let map: Map<string, any> = new Map();
    map.set("HZForecast08", category)
    sendMessage(map);
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

.div-one {
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  max-height: 130vh;
  font-size: 12px;
  /* 防止自动换行 */
  white-space: nowrap;

  /* 以下是flex布局的代码，用于让元素在同一行内 */
  display: flex;
  flex-direction: row;
}

.main-box {
  width: 6%;
  height: 30%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  background-color: #3636368e;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
  cursor: pointer; /* Add this line */
  margin-right: 0.8%;
}

.main-box:hover {
  background-color: #00ff8877;
}

.main-box:active {
  border-color: #2b2b2b79;
  background-color: #2b2b2b79;
}
</style>